/* list */
<template xlang="wxml">
  <div class="list">
    <View class="list_item" v-for="(item,index) in 8" :key="index" >
      <navigator url="/pages/alarmInfo/main">
      <View
        class="lft"
        :style="{backgroundImage:'url(https://img.yzcdn.cn/vant/cat.jpeg)',backgroundSize:'cover'}"
      ></View>
      <div class="rgt" style="font-size:15px;font-weight:700" @tap="navClick">数码城改造</div>
      <div class="rgt">设备名称: 数码城改造</div>
      <div class="rgt">告警类型: 数码城改造</div>
      </navigator>
    </View>
  </div>
</template>

<script>
export default {
  data: () => ({
    listData: [
      { title: "数码城改造", name: "TY1", type: "安全帽", image: "" },
      { title: "数码城改造", name: "TY1", type: "安全帽", image: "" },
      { title: "数码城改造", name: "TY1", type: "安全帽", image: "" },
      { title: "数码城改造", name: "TY1", type: "安全帽", image: "" },
      { title: "数码城改造", name: "TY1", type: "安全帽", image: "" },
      { title: "数码城改造", name: "TY1", type: "安全帽", image: "" }
    ]
  }),
  methods: {
    navClick() {
      console.log("navClick");
      var url = "/pages/index/main";
      wx.navigator({ url });
    }
  }
};
</script>

<style lang="less" scoped>
.list {
  background: rgba(0, 0, 0, 0.05);
  padding: 10px;
  .list_item {
    margin-bottom: 10px;
    position: relative;
    padding-left: 150px;
    height: 100px;
    background: #fff;
    .lft {
      width: 150px;
      height: 100px;
      left: 0;
      position: absolute;
    }
    .rgt {
      padding-left: 10px;
      line-height: 30px;
      font-size: 12px;
      color: #333;
    }
  }
}
</style>